<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>localStorage</title>
  </head>
  <body>
    <!-- 最大特点是浏览器关闭（cookie），也会保存在本地，下次可继续使用 -->
    <!-- 清空有两种方式，1：引导用户清除(清除历史记录)  2：用户手动清除(清除浏览器缓存) -->
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存指定数据</button>
    <button onclick="readData()">点我读取指定数据</button>
    <button onclick="deleteData()">点我删除指定数据</button>
    <button onclick="removeAll()">点我清空数据</button>

    <script>
      let p = { name: "张三", age: 18 };

      function saveData() {
        //保存数据，只能添加字符串，如果是相同名，会进行替换
        localStorage.setItem("msg", "hello2");
        //键必须为字符串，值可以为数字
        localStorage.setItem("num", 666);
        //默认会调用对象.toString，导致输出object   可通过js提供的方法转为json格式输出
        localStorage.setItem("person", JSON.stringify(p));
      }

      function readData() {
        console.log(localStorage.getItem("msg"));
        console.log(localStorage.getItem("num"));
        //读取一个不存在的值时，展示为null
        console.log(localStorage.getItem("num66"));
        //对象可使用Json解析展示
        const result = localStorage.getItem("person");
        console.log(JSON.parse(result));
      }

      //单独删除
      function deleteData() {
        localStorage.removeItem("msg");
      }

      //清空
      function removeAll() {
        localStorage.clear();
      }
    </script>
  </body>
</html>
